<template>
	<div ref="container" />
</template>

<script>
	import * as echarts from 'echarts'
	import {
		reactive,
		toRef,
		ref,
		computed,
		onMounted,
		onBeforeUnmount,
		nextTick
	} from 'vue';

	export default {
		props: {
			unit: {
				type: String,
				default: '个'
			},
			xList: {
				type: Array,
				default: () => {
					return []
				}
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			name: {
				type: Array,
				default: () => {
					return []
				}
			}
		},

		setup(props) {





			const chart = ref(null);
			const container = ref(null);

			const initChart = () => {
				chart.value = echarts.init(container.value);
				console.log('/echarrr', JSON.stringify(props))
				chart.value.setOption({
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: name
					},
					calculable: true,
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisTick: {
							show: false
						},
						data: props.xList
					}],
					yAxis: [{
						type: 'value',
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						},
						name: '数值',
						splitNumber: 10,
					}, {
						type: 'value',
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						},
						name: '百分比',

						min: 0,
						max: 100,
						splitNumber: 10
					}],
					series: props.list
				})
			}

			onBeforeUnmount(() => {
				dispose()
			})

			const dispose = () => {
				if (!chart.value) {
					return
				}
				chart.value.dispose()
				chart.value = null
			}


			return {
				container,
				initChart,
				dispose
			}
		}
	}
</script>

<style>

</style>